<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>数据代理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			关于Vue中的数据代理：
					1.什么是数据代理？
							(1).配置对象data中的数据，会被收集到vm._data中，然后通过，Object.defineProperty让vm上拥有data中所有的属性。
							(2).当访问vm的msg时，返回的是_data当中同名属性的值
							(3).当修改vm的msg时，修改的是_data当中同名属性的值
					2.为什么要数据代理？
							为了更加方便的读取和修改_data中的数据，不做数据代理，就要：vm._data.xxx访问数据
					3.扩展思考？—— 为什么要先收集在_data中，然后再代理出去呢？
							更高效的监视数据（直接收集到vm上会导致监视效率太低）
		-->
		
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名字：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
			<h2>学科：{{subject}}</h2>
		</div>

		<script type="text/javascript" >
			const vm = new Vue({
				el:'#root',
				data:{
					name:'尚硅谷',
					address:'宏福科技园综合楼',
					subject:'前端',
				}
			})
			console.log(vm.address) //通过vm可以读取data中的address
			vm.address = '北七家镇' //通过vm可以修改data中的address
		</script>

	</body>
</html>